<template>
  <el-dialog
    v-model="dialogVisible"
    width="400px"
    :before-close="handleClose"
    style="border-radius: 10px"
  >
    <Verify
      :number="number"
      @success="success"
      mode="pop"
      captchaType="blockPuzzle"
      :imgSize="{ width: '330px', height: '155px' }"
      ref="verifys"
    ></Verify>
    <div class="login f-j-a-c">
      <div class="yanse"></div>
      <div class="yanse1"></div>
      <div class="loginbox" v-if="!wechatChecK">
        <div class="login_top f-a-c f-j-a-c">
          <div class="f-d-c f-j-a-c item" v-if="register && !forgetCheck">
            <span>注册</span>
          </div>
          <div class="f-d-c f-j-a-c item" v-if="forgetCheck && !register">
            <span>忘记密码</span>
          </div>
          <div class="switch f-a-c f-j-a-c" v-if="!register && !forgetCheck">
            <div
              class="switchItem f-j-a-c f-d-c"
              v-for="(item, index) in PasswordList"
              :key="index"
            >
              <!-- @click="passwordClick(index)" -->
              <!-- :class="swtichcurrent == index ? 'spanactice' : ''" -->
              <span class="spanactice">{{ item.title }}</span>
              <!-- <div class="line" v-if="swtichcurrent == index"></div> -->
            </div>
          </div>
        </div>

        <div
          class="logininput"
          v-if="swtichcurrent == 1 && !register && !forgetCheck"
        >
          <div class="inputitem">
            <input
              type="number"
              @change="NumberINput"
              placeholder="请输入手机号"
              v-model="number"
            />
          </div>
          <div class="inputitem f-a-c">
            <input type="text" placeholder="验证码" v-model="code" />
            <div class="sendcode click f-j-a-c" @click="sendCode">
              <span>{{ !sendCheck ? "发送验证码" : "重新发送" + time }}</span>
            </div>
          </div>
        </div>

        <div
          class="logininput"
          v-if="swtichcurrent == 0 && !register && !forgetCheck"
        >
          <div class="inputitem">
            <input
              type="number"
              @change="NumberINput"
              placeholder="请输入手机号"
              v-model="number"
            />
          </div>
          <div class="inputitem f-a-c">
            <input
              :type="inputtype == true ? 'text' : 'password'"
              placeholder="密码"
              v-model="code"
            />
            <svg-icon
              @click="see"
              name="icon-mima"
              class="mima click"
            ></svg-icon>
          </div>
        </div>

        <div class="logininput" v-if="register && !forgetCheck">
          <div class="inputitem">
            <input
              type="number"
              @change="NumberINput"
              placeholder="请输入手机号"
              v-model="number"
            />
          </div>
          <div class="inputitem f-a-c">
            <input type="text" placeholder="验证码" v-model="code" />
            <div class="sendcode click f-j-a-c" @click="sendCode">
              <span>{{ !sendCheck ? "发送验证码" : "重新发送" + time }}</span>
            </div>
          </div>
          <div class="inputitem f-a-c">
            <input
              :type="inputtype == true ? 'text' : 'password'"
              placeholder="密码"
              v-model="password"
            />
            <svg-icon
              @click="see"
              name="icon-mima"
              class="mima click"
            ></svg-icon>
          </div>
        </div>
        <div class="logininput" v-if="forgetCheck">
          <div class="inputitem">
            <input
              type="number"
              @change="NumberINput"
              placeholder="请输入手机号"
              v-model="number"
            />
          </div>
          <div class="inputitem f-a-c">
            <input type="text" placeholder="验证码" v-model="code" />
            <div class="sendcode click f-j-a-c" @click="sendCode">
              <span>{{ !sendCheck ? "发送验证码" : "重新发送" + time }}</span>
            </div>
          </div>
          <div class="inputitem f-a-c">
            <input
              :type="inputtype == true ? 'text' : 'password'"
              placeholder="新密码"
              v-model="password"
            />
            <svg-icon
              @click="see"
              name="icon-mima"
              class="mima click"
            ></svg-icon>
          </div>
          <div class="inputitem f-a-c" style="margin-top: 10px">
            <input
              :type="inputtypes == true ? 'text' : 'password'"
              placeholder="请再次输入新密码"
              v-model="newpassword"
            />
            <svg-icon
              @click="seenew"
              name="icon-mima"
              class="mima click"
            ></svg-icon>
          </div>
        </div>
        <div class="Forget f-a-c">
          <span class="click" @click="forgetChecknow">忘记密码</span>
        </div>

        <div
          @click="loginnow"
          class="loginbutton click f-j-a-c"
          :class="verification ? 'loginbuttonactice' : ''"
        >
          <span>
            {{ register ? "注册" : forgetCheck == true ? "修改" : "登录" }}
          </span>
        </div>
        <!-- <div class="f-a-c nolong f-j-a-c">
          <span class="click" @click="yiyou">没有账号？</span>
          <span class="click" @click="registernow">立即注册</span>
        </div> -->
        <div class="otherlogin f-a-c f-j-a-c">
          <div class="line"></div>
          <span>其他登录方式</span>
          <div class="line"></div>
        </div>
        <div class="wechar click" @click="wecharClick">
          <svg-icon
            name="icon-weixin"
            style="width: 28px; height: 28px; text-align: center"
          ></svg-icon>
        </div>
        <div class="introduce click" style="margin-top: 20px">
          <span
            >注册登录即代表同意
            <span @click="openwindow(1)">《用户协议》</span>
            <span @click="openwindow(2)">《隐私政策》</span></span
          >
        </div>
      </div>
      <div class="wechatlogo" v-else>
        <div class="login_tops f-a-c f-j-a-c">
          <div class="f-d-c f-j-a-c item">
            <span>微信扫码登录</span>
            <span>未注册的微信号将自动创建账号</span>
          </div>
        </div>
        <div class="erweima f-j-a-c f-d-c" id="erwei_item">
          <ercdeo ref="ercdeobox" @handleClose="handleClose"></ercdeo>
          <img
            :src="scanImg"
            alt=""
            v-if="scanImg"
          />
          <div v-else>
            <svg-icon name="loading"></svg-icon>
          </div>
        </div>
        <div class="f-a-c denglu">
          <!-- <svg-icon name="icon-weixin"></svg-icon> <span>微信扫码登录</span> -->
        </div>
        <div class="phoneGO f-a-c f-j-a-c click" @click="zhanhaodenglu">
          <svg-icon name="icon-shouji"></svg-icon>
          <span>手机号登录注册</span>
        </div>
        <div class="introduce" style="margin-top: 20px">
          <span>注册登录即代表同意《用户协议》《隐私政策》</span>
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- <span class="beian f-a-c" -->
  <!-- >©DESAI 2023 - 2024xx有限公司 | <svg-icon name="icon-beian"></svg-icon> -->
  <!-- <span
      >互联网安全备案号：30256658887752 | 备案信息：粤ICP备255546464843</span
    >
  </span> -->
</template>

<script>
import bindcode from "@/components/bindcode.vue";
// import ercdeo from "@/components/ercode.vue";
import CryptoJS from "crypto-js";
import Verify from "@/components/verifition/Verify.vue";
import VueDragVerify from "vue-drag-verify";
import {
  sendsms,
  loginNow,
  register,
  userinfo,
  forget,
  getToken,
} from "@/axios/api";
import { getcode, snslogin, scanCode, scanLogin } from "@/axios/community.js";
import { showLoading, hideLoading } from "@/utils/loading.js";
import QrcodeVue from "qrcode.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
} from "vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";

export default defineComponent({
  components: {
    // ercdeo,
    Verify,
    // Vcode,
    VueDragVerify,
    QrcodeVue,
    bindcode,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { attrs, slots, emit }) {
    const verifys = ref();
    const ercdeobox = ref(null);
    let { t } = useI18n();
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      huakuaiCheck: false,
      isShow: false,
      top: 0,
      inputtypes: false,
      newpassword: "",
      forgetCheck: false,
      password: "",
      register: false,
      swtichcurrent: 1,
      PasswordList: [
        // {
        //   title: "密码登录",
        // },
        {
          title: "验证码登录",
        },
      ],
      code: "",
      sendCheck: false,
      wechatChecK: false,
      verification: false,
      number: "",
      current: 0,
      time: 60,
      inputtype: false,
      clickRegister: false,

      scanImg: '',
      scanScene: ''
    });
    let loginTypeClick = (index) => {
      data.current = index;
    };
    // 检查是否登录
    let getscantick = (code) => {
      checklogin()
        .then((res) => {
          console.log(res);
          clearInterval(data.time);
        })
        .catch((err) => {
          clearInterval(data.time);
        });
    };
    // 获取token
    let gettoken = () => {};

    // 实例微信js对象
    const setWxerwma = () => {
      // const s = document.createElement("script");
      // s.type = "text/javascript";
      // s.src = "http://admin.i-desai.com/wxLogin.js";
      // const wxElement = document.body.appendChild(s);
      // wxElement.onload = function () {
      //   var obj = new WxLogin({
      //     id: "erwei_item", // 需要显示的容器id
      //     appid: "wxca1888e905e84445", // 公众号appid wx*******
      //     scope: "snsapi_login", // 网页默认即可
      //     redirect_uri: encodeURIComponent("https://desai.art/"), // 授权成功后回调的url
      //     state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
      //     style: "black", // 提供"black"、"white"可选。二维码的样式
      //     href: "https://desai.art/wechat.css", // 外部css文件url，需要https
      //   });
      // };
      scanCode().then((res) => {
        if(res.status){
          data.scanImg = res.data.url;
          data.scanScene = res.data.scene;
        }else{
          return ElMessage.error("服务器生成二维码失败");
        }
      });

      let times = 60;
      let scantimer = setInterval(() => {
        if(times < 0){
          clearTimeout(scantimer);
        }
        if(data.wechatChecK == true){
          times--;
          scanLogin({scene: data.scanScene}).then((res) => {
            if(res.status){
              clearTimeout(scantimer);
              store.commit("saveminUserInfo", res.data.user);
              store.commit("setminToken", res.data.token);
              store.dispatch("updataMinUserBalance");
              ElMessage.success("登录成功");
              data.scanImg = '';
              data.scanScene = '';
              emit("close");
              hideLoading();
            }else{
              return false;
            }
          })
        }else{
          clearTimeout(scantimer);
        }
      }, 1500);

    };

    // 微信登录
    // let wechatLogin = () =>{
    //   const state = Math.random().toString().slice(2);
    //   let url = 'https://open.weixin.qq.com/connect/qrconnect?appid=wxb1e8a07345b49360&redirect_uri=${webviewUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'
    // }
    let encrypt = (word) => {
      const key = CryptoJS.enc.Utf8.parse("baoposhengerzim1");
      const IV = CryptoJS.enc.Utf8.parse("baoposhengerzim1");
      let srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: IV,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.ZeroPadding,
      });
      return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
    };
    // 忘记密码
    let getforget = () => {
      if (data.password != data.newpassword) {
        return ElMessage.error("两次密码不同");
      }
      let datas = {};
      datas.phone = data.number;
      datas.code = data.code;
      datas.password = data.password;
      forget({ ...datas })
        .then((res) => {
          ElMessage.success("修改成功");
          data.register = false;
          data.forgetCheck = false;
          datas.password = "";
          datas.code = "";
          datas.number = "";
        })
        .catch((err) => {
          ElMessage.error(err.msg);
        });
    };
    onMounted(() => {
      // data.time = setInterval(() => {
      //   getscantick();
      // }, 2000);
      // getcode();
    });
    onUnmounted(() => {

    });
    let wecharClick = () => {
      // return ElMessage.error("暂未开放");
      data.wechatChecK = true;
      setWxerwma();
    };

    let handleClose = () => {
      if (ercdeobox.value) {
        ercdeobox.value.clean();
      }
      setTimeout(() => {
        emit("close");
      }, 500);
    };
    let getregister = (msg) => {
      data.clickRegister = false;

      let datas = {
        user: {},
        data: {},
      };
      datas.user.phone = data.number;
      datas.user.password = data.password;
      datas.user.code = data.code;
      datas.data.captchaVerification = msg.captchaVerification;
      datas.data.clientUid = encrypt(data.number);
      register({ ...datas })
        .then((res) => {
          if (res.data.code == 201) {
            return ElMessage.success(res.data.msg);
          }
          // data.password = "";

          ElMessage.success("注册成功");
          data.register = false;
          data.forgetCheck = false;
        })
        .catch((err) => {
          console.log(err);
          // if (err.code == 201) {
          return ElMessage.error(err.msg);
          // }
        });
    };
    // 邮箱正则验证
    let testEmail = () => {
      let regEmail = new RegExp(
        /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      );
      return regEmail.test(data.number);
    };
    // 手机正则验证
    let testPhone = () => {
      let regEmail = new RegExp(
        /^(13\d|14[579]|15[^4\D]|16[6]|17[^249\D]|18\d|19[89])\d{8}$/
      );
      return regEmail.test(data.number);
    };
    //切换到账户登录
    let zhanhaodenglu = () => {
      data.wechatChecK = false;
    };
    //输入框监听
    let NumberINput = () => {
      if (!data.number || !testPhone())
        return ElMessage.error("请输入正确的手机号");
      data.verification = true;
    };
    //发送验证码
    let sendCode = () => {
      if (data.number) {
        showLoading();
        success();
        // console.log(verifys);
        // verifys._value.show();
      } else {
        return ElMessage.error("请输入正确的手机号");
      }
    };
    //登录
    let loginnow = () => {
      showLoading();
      if (data.swtichcurrent == 0 && !data.code) {
        return ElMessage.error("请填写密码");
      }
      if (data.code == "") {
        return ElMessage.error("请填写验证码");
      } else if (data.phone == "") {
        return ElMessage.error("请填写手机号");
      }
      if (data.register && !data.password) {
        return ElMessage.error("请填写密码");
      }
      if (data.forgetCheck == true) {
        getforget();
        return;
      }
      if (data.register == true) {
        verifys._value.show();
        data.clickRegister = true;
        return;
      }
      let datas = {};

      datas.phone = data.number;
      datas.idd = 86;
      datas.code = data.code;

      // if (data.swtichcurrent == 1) {
      //   datas.code = data.code;
      // } else {
      //   datas.password = data.code;
      // }
      // console.log(datas);
      snslogin({ ...datas })
        .then((res) => {
          store.commit("saveminUserInfo", res.data.user);
          store.commit("setminToken", res.data.token);
          store.dispatch("updataMinUserBalance");
          ElMessage.success("登录成功");
          handleClose();
          hideLoading();
        })
        .catch((err) => {
          ElMessage.error(err.msg);
        });
    };

    // 获取创作token
    let getCreatToken = () => {
      getToken().then((res) => {
        let mjToken = res.data;
        store.commit("setMjToken", mjToken);
      });
    };

    let see = () => {
      data.inputtype = !data.inputtype;
    };
    let getuserinfo = () => {
      userinfo().then((res) => {
        let dataslist = res.data;
        dataslist.mininfo = store.state.minUserInfo;
        store.commit("saveUserInfo", dataslist);
        handleClose();
      });
    };
    let seenew = () => {
      data.inputtypes = !data.inputtypes;
    };
    let passwordClick = (index) => {
      data.swtichcurrent = index;
      data.code = "";
    };
    let yiyou = () => {
      data.register = false;
      data.forgetCheck = false;
    };
    let openwindow = (val) => {
      if (val == 1) {
        window.open("https://mini.chongyeapp.com/common/clause?id=21", "_blank");
      } else {
        window.open("https://mini.chongyeapp.com/common/clause?id=22", "_blank");
      }
    };
    const submit = () => {
      data.isShow = true;
    };

    // 用户通过了验证
    const success = (msg) => {
      // console.log(msg, "通过验证");
      // 注册
      // if (data.register && data.clickRegister) {
      //   getregister(msg);

      //   return;
      // }
      // 发送验证码
      // data.verification &&
      if (data.time == 60) {
        getcode({
          phone: data.number,
          idd: 86,
        })
          .then((res) => {
            console.log(res);
            if (res.code == 200 && data.sendCheck == false) {
              let time = setInterval(() => {
                data.time--;
                if (data.time == 0) {
                  clearTimeout(time);
                  data.sendCheck = false;

                  data.time = 60;
                }
              }, 1000);
              data.sendCheck = true;
              hideLoading();
              return ElMessage.success("验证码发送成功");
            }
          })
          .catch((err) => {
            data.time = 0;
            data.sendCheck = true;
            data.time = err.data;
            let time = setInterval(() => {
              data.time--;
              if (data.time == 0) {
                clearTimeout(time);
                data.sendCheck = false;
                data.time = 60;
              }
            }, 1000);
            return ElMessage.error("请重新等待发送");
          });
      } else {
        return ElMessage.error("验证码已发送,请等待倒计时结束");
      }
    };
    // 用户点击遮罩层，应该关闭模态框
    const close = () => {
      data.isShow = false;
    };
    // 用户验证失败
    const fail = () => {
      return ElMessage.error("验证失败,请重新验证");
    };
    // 立即注册
    let registernow = () => {
      data.register = true;
      data.forgetCheck = false;
    };
    // 忘记密码
    let forgetChecknow = () => {
      data.register = false;
      data.forgetCheck = true;
    };
    return {
      getscantick,
      ercdeobox,
      gettoken,
      setWxerwma,
      encrypt,
      forgetChecknow,
      registernow,
      getforget,
      getuserinfo,
      verifys,
      submit,
      success,
      close,
      fail,
      getregister,
      openwindow,
      yiyou,
      seenew,
      see,
      passwordClick,
      loginnow,
      zhanhaodenglu,
      handleClose,
      wecharClick,
      NumberINput,
      testPhone,
      testEmail,
      sendCode,
      loginTypeClick,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
::v-deep .el-overlay {
  z-index: 20 !important;
}
.huakuai {
  position: absolute;
  top: 0;
  z-index: 3000;
}
.imgcheck {
}
.Forget {
  margin-top: 10px;
  justify-content: flex-end;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #64c8dc;
  }
}
.nolong {
  margin-top: 10px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #656f79;
    &:last-child {
      color: #64c8dc;
    }
  }
}
.switch {
  position: relative;
  z-index: 5;
  width: 220px;
  .switchItem {
    cursor: pointer;
    .spanactice {
      color: #64c8dc !important;
    }
    > span {
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #656f79;
    }
    .line {
      position: absolute;
      bottom: -2px;
      margin-top: 2px;
      width: 40px;
      height: 2px;
      background: #64c8dc;
      border-radius: 0px 0px 0px 0px;
    }
  }
}
.wechatlogo {
  position: relative;
}
.login_top {
  .item {
    > span {
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #000000;
    }
  }
}
.login_tops {
  .item {
    > span {
      font-size: 20px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #64c8dc;
      &:last-child {
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #656f79;
      }
    }
  }
}
.erweima {
  margin-top: 20px;
  margin-bottom: 31px;
  height: 260px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px 20px 20px 20px;
  opacity: 1;
  > img {
    width: 170px;
    height: 170px;
  }
  .erwei_item {
    width: 170px !important;
    height: 170px !important;
  }
}
.denglu {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  margin-top: 21px;
  > span {
    margin-left: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
}
.phoneGO {
  position: relative;
  z-index: 1;
  width: 160px;
  height: 46px;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #ececec;
  margin: 0 auto;
  > span {
    margin-left: 10px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }
}
.login {
  background-size: 100% 100%;
  > img {
    cursor: pointer;
    position: absolute;
    top: 16px;
    left: 59px;
    width: 104px;
  }
}
.loginbox {
  margin-top: -26px;
  width: 480px;
  background: #ffffff;
  // border-radius: 0 20px 20px 20px;
  opacity: 1;

  .logininput {
    margin-top: 42px;
    .inputitem {
      margin-top: 10px;
      position: relative;
      // width: 380px;
      height: 48px;
      opacity: 1;
      > input {
        border: 1px solid #ececec;

        border-radius: 10px 10px 10px 10px;
        width: 100%;
        height: 100%;
        padding: 0 20px;
      }
      .mima {
        position: absolute;
        right: 11px;
        bottom: 35%;
      }
      &:last-child {
        margin-top: 20px;
      }
      .sendcode {
        position: absolute;
        right: 3px;
        width: 96px;
        height: 40px;
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
  .loginbuttonactice {
    opacity: 1 !important;
  }
  .loginbutton {
    margin-top: 23px;
    // width: 380px;
    height: 48px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 0.4;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
  }
  .otherlogin {
    margin-top: 30px;
    .line {
      width: 134px;
      height: 1px;
      opacity: 1;
      background-color: #ececec;
    }
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
  }
  .wechar {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 13px;
    margin-bottom: 28px;
  }
}
.introduce {
  position: relative;
  z-index: 10;
  text-align: center;
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #656f79;
}
.beian {
  position: absolute;
  bottom: 10px;
  z-index: 10;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
}
.yanse {
  position: absolute;
  top: 0;
  left: 0;
  width: 215px;
  height: 163px;
  background: rgba(100, 200, 220, 0.5);
  z-index: 0;
  filter: blur(190px);
}
.yanse1 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 215px;
  height: 163px;
  background: rgba(100, 200, 220, 0.5);
  z-index: 0;
  filter: blur(190px);
}
</style>
